import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Alert, Typography, Divider } from 'antd';
import styles from './Welcome.less';
import { One } from '@/pages/CustomeComponents/One';

const sayHello = () => {
  console.log('hello');
  return 'hello';
};

// 函数组件
const arr = [
  { id: 1, name: '张三', billNo: '1001', city: '北京' },
  { id: 2, name: '李四', billNo: '1002', city: '湖北' },
  { id: 3, name: '高启强', billNo: '1003', city: '长沙' },
];

const flag = true; // 自定义状态

const CodePreview: React.FC = ({ children }) => (
  <pre className={styles.pre}>
    <code>
      <Typography.Text copyable>{children}</Typography.Text>
    </code>
  </pre>
);

// 欢迎组件页面
const Welcome: React.FC = () => {
  return (
    <PageContainer>
      <Card>
        <Alert
          message={'更快更强的重型组件，已经发布。'}
          type="success"
          showIcon
          banner
          style={{
            margin: -12,
            marginBottom: 24,
          }}
        />
        <Typography.Text strong>
          高级表格{' '}
          <a
            href="https://procomponents.ant.design/components/table"
            rel="noopener noreferrer"
            target="__blank"
          >
            欢迎使用
          </a>
        </Typography.Text>
        <CodePreview>yarn add @ant-design/pro-table</CodePreview>
        <Typography.Text
          strong
          style={{
            marginBottom: 12,
          }}
        >
          高级布局{' '}
          <a
            href="https://procomponents.ant.design/components/layout"
            rel="noopener noreferrer"
            target="__blank"
          >
            欢迎使用
          </a>
        </Typography.Text>
        <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
      </Card>

      {/*TODO JSX语法*/}
      <Card>
        <h1>React</h1>
        <div>hello React </div>
        <h2>Hello JSX</h2>
        <Divider></Divider>

        {/* jsx 函数调用*/}
        <p className={styles.hello}>{sayHello()}</p>
        <button disabled={flag == true ? true : false}>点击使用</button>

        <h3>todoList</h3>
        <div>
          {/*在 react 中实现类似于 Vue 的 v-for 语法*/}
          <ul>
            {arr.map((item, i) => {
              return (
                <li key={item.id}>
                  {/*key 适用于 react 中的 diff 算法的*/}
                  <em>{i + 1}</em> &ensp;&ensp;{item.name} (所在城市: {item.city})
                </li>
              );
            })}
          </ul>
        </div>
        <hr />

        {/*自定义组件*/}
        <One title={'hello'} data={[1, 2, 3, 4, 5]} label="hello world">
          <span>hello world </span>
          <span>这是一个虚拟Dom , 写的内容传递给了 props</span>
        </One>
      </Card>
    </PageContainer>
  );
};

export default Welcome;
